Skip to content

refactor: 优化播放器组件,修复触摸事件处理,增强进度条提示功能#21

Merged
Re-BeiChen merged 1 commit into
SPlayer-Dev:devfrom
Shomi-FJS:Webview-FIX
May 21, 2026
Merged

refactor: 优化播放器组件,修复触摸事件处理,增强进度条提示功能#21
Re-BeiChen merged 1 commit into
SPlayer-Dev:devfrom
Shomi-FJS:Webview-FIX

Conversation

@Shomi-FJS
Copy link
Copy Markdown

fix+perf(Player): 重构移动端拖拽开启播放器逻辑并优化歌词渲染性能

📌 变更类型

  • ✨ feat — 新功能
  • 🐞 fix — Bug 修复
  • 🎨 style — 仅样式 / 格式,不影响逻辑
  • ♻️ refactor — 重构,不改变外部行为
  • ⚡ perf — 性能优化
  • 📝 docs — 仅文档
  • 🧪 test — 新增 / 修改测试
  • 🔧 chore — 构建 / 脚本 / 依赖
  • 🚀 ci — 仅 CI 配置
  • ⏪ revert — 回滚

📝 变更说明

修复界面会卡顿的现象。

同时修复了悬浮控制栏的左右切歌会被绑定到进度条上的问题。

移动端全屏播放器的拖拽开启流程补充了异步挂载重试、关闭动作打断兜底和内联样式清理逻辑,解决 Transition 挂载竞态、关闭动画被新手势打断后卡住、FullPlayer 残留 transform 导致不可交互等问题。同时缓存移动端歌词分页状态,并修复切歌后可能打开到空白歌词页的问题。

进度条 tooltip 改为交互时显示、延迟隐藏,避免拖动结束后提示立即消失。部分拖拽动画中移除了 backdropFilter / contain 等高开销内联样式,减少合成层压力。FullPlayer 中 Electron IPC 调用增加可选链,提升 Android / 非 Electron 环境兼容性。

🔗 关联 Issue

暂无

📱 影响范围

  • 🎵 播放引擎 / 音频
  • 📝 歌词 / 桌面歌词
  • 🔔 通知栏 / MediaSession
  • 🌐 在线音乐 (网易云 / Jellyfin / Navidrome / Emby / Subsonic / Last.fm)
  • 🧩 内置 API (nodejs-mobile)
  • 🎨 UI / 主题 / 布局
  • 📦 构建 / 打包 / 签名
  • 📱 Capacitor / 原生 Android 代码
  • 📄 文档 / README

✅ 自检清单

  • 本 PR 目标分支为 dev
  • 本地已执行 pnpm lint 且无 warning
  • 本地已执行 pnpm typecheck 且无报错
  • 已在 至少一台真机 上构建并验证关键路径
  • UI 改动已兼顾 手机竖屏 + 平板横屏 两种布局
  • 新增 / 修改的文案使用中文,与项目整体风格一致
  • 未引入不必要的依赖 / 大体积资源
  • 未修改签名密钥 / CI Secrets 相关文件

📸 截图 / 录屏 (UI 类 PR 必填)

改动前 改动后
原底栏拖拽展开全屏播放器时,偶发动画卡住或从异常位置开始;拖动进度条存在误触上滑展开风险 底栏拖拽展开更稳定,进度条拖动不再触发展开,全屏播放器关闭 / 打断手势后可正常恢复
AMLL 歌词在 WebView 掉帧或后台恢复后可能出现动画突跳 歌词动画帧步长受限,恢复播放时过渡更平滑
进度条 tooltip 在拖动结束后立即消失 tooltip 会在交互后短暂保留,便于确认时间和歌词位置

🧪 测试方式

  1. 在手机竖屏打开播放器,从底栏上滑展开全屏播放器,多次中断、取消、重新拖拽,确认不会卡在半展开或不可交互状态。
  2. 拖动底栏和移动端全屏播放器内的进度条,确认只调整播放进度,不会误触发全屏播放器展开手势,tooltip 显示和延迟隐藏正常。
  3. 在有 AMLL 歌词的歌曲中播放、暂停、切歌、后台切回,确认歌词滚动和动画没有明显突跳。
  4. 在有歌词和无歌词歌曲之间切换,关闭后重新打开移动端全屏播放器,确认不会停留在空白歌词页。
  5. 在手机竖屏和平板横屏分别验证底栏播放器、全屏播放器、歌词页布局显示正常。

💬 其他说明 (选填)

本次改动主要集中在移动端播放器手势、全屏播放器过渡动画和 AMLL 歌词渲染体验。未引入新依赖,未修改原生 Android 代码、签名配置或 CI 配置。

主要改动:
- AMLL 歌词组件添加触摸锁定与帧 delta 上限,防止滑动冲突和跳帧
- MainPlayer 重构拖拽开启全屏播放器逻辑:
  - 将 pointer 事件绑定到底栏本体 (.main-player-body),避免进度条误触
  - 新增 initDragOpen 重试机制(最多 8 帧),解决 Transition 异步挂载竞态
  - 新增 pendingCloseFinalize 机制,处理关闭动作被打断时的卡死问题
  - 添加 onBeforeUnmount 清理所有 timer/RAF/内联样式
- FullPlayerMobile 缓存歌词分页状态,修复切歌后打开空白歌词页的 bug
- PlayerSlider 新增 tooltip 延迟隐藏逻辑,避免拖拽后 tooltip 立即消失
- 移除 backdropFilter/contain 内联样式,减少合成层开销
- FullPlayer 添加 electron IPC 可选链,兼容 Android 环境
@Shomi-FJS
Copy link
Copy Markdown
Author

同时修复了触摸穿透的问题

@Re-BeiChen Re-BeiChen merged commit 1b0f179 into SPlayer-Dev:dev May 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants